<template>
    <div class="box">
        <header>
            <h6>我的资产</h6>
            <p>总资产价值</p>
            <span>0.00元</span>
            <img src="../assets/img/3-9wpdezichan_06.png"/>
        </header>
        <div class="main">
            <ul class="listOne">
                <li>
                    <p>{{listTite.title}}</p>
                    <span >{{listTite.num}}</span>
                </li>
                <li>
                   <p class="tx">提现</p>  |
                    <p class="cz">充值</p> 
                </li>
            </ul>
            <ul class="listTwo">
                <li v-for="list in listMenu">
                    <p>{{list.title}}</p> 
                    <span>{{list.num}}</span>
                </li>
            </ul>
            <ul class="listThree">
                <li>
                   <p class="dou">金豆<span>{{numData.dou}}</span>个</p>  
                    <p class="quan">优惠券<span>{{numData.quan}}</span>张可用</p> 
                </li>
            </ul>
            <ul class="listFour">
                <li v-for="list in listData">
                    <div class="left">
                        <img :src="list.url1" />
                        <div class="text">
                            <p>{{list.text1}}</p>
                            <p class="color">{{list.text2}}</p>
                        </div>
                    </div>
                    <div class="right">
                        <img :src="list.url2" />
                        <div class="text">
                            <p>{{list.text3}}</p>
                            <p class="color">{{list.text4}}</p>
                        </div>
                    </div>
                    
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
 
export default {
  name: 'box',
  data () {
    return{
        listTite:{title:"现金账户",num:"0.00元"},
        listMenu:[
            {title:"黄金账户",num:"0.000克"},
            {title:"白银账户",num:"0.0克"}
        ],
        numData:{ dou:"0",quan:"3"},
        listData:[
            {url1:"static/img/3-9wpdezichan_26.png",text1:"买入金银",text2:"买入金银收益",url2:"static/img/3-9wpdezichan_28.png",text3:"卖出金银",text4:"卖出金银收益"},
            {url1:"static/img/3-9wpdezichan_32.png",text1:"存金生息",text2:"闲置黄金能赚钱",url2:"static/img/3-9wpdezichan_33.png",text3:"换购饰品",text4:"账户金银换饰品"},
            {url1:"static/img/3-9wpdezichan_36.png",text1:"转存金银",text2:"定期活期随心换",url2:"static/img/3-9wpdezichan_37.png",text3:"实物提货",text4:"实物提取更便捷"}
        ]
    }
  },
 
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
   @import ".././assets/less/3-9wodezichan.less";
   @import ".././assets/css/reset.css";
   @import ".././assets/less/style.less";

</style>